<template>
  <div class="container">
    <Card class="card">
      <p slot="title">
        {{ title }}
      </p>
      <Row :gutter="8">
        <i-col span="24">
          <!-- 用户信息 -->
          <template v-if="showUserInfo">
            <Form
              ref="formInline"
              :model="formInline"
              :rules="ruleInline"
              :label-width="80"
            >
              <FormItem prop="username" label="用户名">
                <i-input
                  type="text"
                  v-model="formInline.username"
                  placeholder="Username"
                >
                  <Icon type="ios-person-outline" slot="prepend"></Icon>
                </i-input>
              </FormItem>
              <FormItem prop="userMail" label="邮箱">
                <i-input
                  type="text"
                  v-model="formInline.userMail"
                  placeholder="Email"
                >
                  <Icon type="ios-mail-open-outline" slot="prepend" />
                </i-input>
              </FormItem>
              <FormItem prop="userPhone" label="手机号">
                <i-input
                  type="text"
                  v-model="formInline.userPhone"
                  placeholder="Phone"
                >
                  <Icon type="ios-phone-portrait" slot="prepend" />
                </i-input>
              </FormItem>
              <FormItem>
                <Button type="primary" @click="checkUser('formInline')">
                  找回密码
                </Button>
              </FormItem>
            </Form>
          </template>

          <!-- 显示密码框 -->
          <template v-if="showRePassword">
            <Form
              ref="formInline"
              :model="formInline"
              :rules="ruleInline"
              :label-width="80"
            >
              <FormItem prop="rePassword" label="新密码">
                <i-input
                  type="password"
                  password
                  v-model="formInline.rePassword"
                  placeholder="Password"
                >
                  <Icon type="ios-lock-outline" slot="prepend"></Icon>
                </i-input>
              </FormItem>
              <FormItem>
                <Button
                  type="primary"
                  @click="changeUserPassword('formInline')"
                >
                  修改密码
                </Button>
              </FormItem>
            </Form>
          </template>
        </i-col>
      </Row>
    </Card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showUserInfo: true,
      showRePassword: false,
      formInline: {
        username: '',
        rePassword: '',
        userMail: '',
        userPhone: ''
      },
      ruleInline: {
        username: [
          {
            required: true,
            message: 'Please fill in the user name',
            trigger: 'blur'
          }
        ],
        rePassword: [
          {
            required: true,
            message: 'Please fill in the rePassword.',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 6,
            message: 'The rePassword length cannot be less than 6 bits',
            trigger: 'blur'
          }
        ],
        userMail: [
          {
            required: true,
            message: 'Mailbox cannot be empty',
            trigger: 'blur'
          },
          { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
        ],
        userPhone: [
          {
            required: true,
            message: 'Phone cannot be empty',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    title() {
      return this.showUserInfo ? '验证账号' : '修改密码'
    }
  },
  methods: {
    // 检验是否存在用户
    checkUser(name) {
      const formData = {
        username: this.formInline.username,
        userMail: this.formInline.userMail,
        userPhone: this.formInline.userPhone
      }
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$http
            .post('http://localhost:3000/user/findPassword', formData, {
              emulateJSON: true
            })
            .then(({ body }) => {
              if (body.status === 200) {
                this.showUserInfo = false
                this.showRePassword = true
                this.$message.success({
                  content: '账号验证成功，请设置新密码',
                  duration: 2,
                  closable: true
                })
              }
            })
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    // 修改密码
    changeUserPassword(name) {
      const formData = {
        username: this.formInline.username,
        userMail: this.formInline.userMail,
        userPhone: this.formInline.userPhone,
        rePassword: this.formInline.rePassword
      }
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$http
            .post('http://localhost:3000/user/findPassword', formData, {
              emulateJSON: true
            })
            .then(({ body }) => {
              const { status, message } = body
              if (status === 200) {
                this.$message.success({
                  content: message,
                  duration: 2,
                  closable: true
                })
                this.$router.push({ path: '/login' })
              }
            })
        } else {
          this.$Message.error('Fail!')
        }
      })
    }
  }
}
</script>

<style lang="css" scoped>
.container {
  padding: 0 8px;
  padding-top: 8px;
}
.card {
  width: 500px;
  margin: 0 auto;
  margin-top: 10%;
}
</style>
